<template>
  <div class="home flexBox">
    <div class="nav">
      <yj-mob-icon name="arrow-left" color="rgba(0,0,0,1)" size="17px" @click="goback()"/>
      <div class="nav-title">通知</div>
    </div>
    <div class="remind-main">
      <yj-mob-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <div class="notification-item" v-for="(item, index) in list" :key="index">
        <div class="notification-title">
          <img :src="`/gw/ucsapi/head_photo/user/${item.sender_username}/${sizeImg}`"  alt="">
          <p>{{item.sender_realname}}</p>
        </div>
        <div class="notification-content">
          <div class="notification-characters">{{(item.showMore && item.content.length>74)?(item.content.slice(0,74) + '...') : item.content}}</div>
          <div class="see-more" v-if="item.content.length>74" @click="seeMore(item)">{{!item.showMore?'收起':'查看更多'}}</div>
          <div class="notification-img">
            <img :src="getImg(img.rcode)" alt="" v-for="(img,ind) in item.attachment" :key="ind">
          </div>
          <p class="notification-time">{{item.send_at}}</p>
        </div>
      </div>
      </yj-mob-list>
    </div>
    <FloatBtn/>
  </div>
</template>

<script>
import YouXin from 'youxin-js-sdk';
import { Icon, List, Toast } from 'yj-mob-ui';
import { informationServices } from '@/api';
import aes from '@/utils/aes';
import FloatBtn from '../../components/FloatBtn';
export default {
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    FloatBtn
  },
  data () {
    return {
      loading: false,
      finished: false,
      list: [],
      size: 10,
      msgType: '1',
      page: 0,
      sizeImg: 100,
      showMore: true
    };
  },
  created () {
  },
  methods: {
    /**
     * @author: ckk
     * @description: 返回
     * @return {*}
     */
    goback () {
      if (this.$route.query.isGo === '1') {
        this.$router.go(-1);
      } else {
        YouXin.closeWindow();
      }
    },
    /**
     * @author: ckk
     * @description: 加载
     * @return {*}
     */
    async onLoad () {
      const dataList = await this.getList();
      this.loading = false;
      this.list = this.list.concat(dataList);
      if (dataList.length < this.size) {
        this.finished = true;
      } else {
        this.page++;
      }
    },
    getImg (code) {
      console.log(code, 'code');
      return location.origin + '/appnass/v1/appshow/' + code;
    },
    seeMore (item) {
      item.showMore = !item.showMore;
    },
    /**
     * @author: ckk
     * @description: 获取消息列表
     * @return {*}
     */
    async getList () {
      const params = {
        sendUxin: '1',
        msgType: this.msgType,
        page: this.page,
        size: this.size
      },
      res = await informationServices.getInformationList(params);
      if (res.code === 200) {
        res.data.forEach(item => {
          item.showMore = true;
          item.attachment = item.attachment ? JSON.parse(item.attachment) : [];
          item.sender_realname = item.sender_realname ? aes.decode(item.sender_realname) : '';
        });
        console.log(res.data, 'oooppp');
        return res.data;
      } else {
        return [];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.flexBox{
  display: flex;
  flex-direction: column;
}
.nav{
  width:100%;
  position: relative;
  padding:20px 0;
  display: flex;
  flex-shrink: 0;
  i{
    width:20px;
    height:20px;
    position: absolute;
    left:17px;
    top:22px;
  }
  .nav-title{
    width:100%;
    text-align: center;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: #000000;
  }
}
.see-more{
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular, sans-serif;
  font-weight: 400;
  color: #0C90F8;
  padding-left:12px;
  margin-bottom:8px;
}
.notification-time{
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular, sans-serif;
  font-weight: 400;
  text-align: left;
  color: rgba(0,0,0,0.25);
  padding-left:12px;
}
.remind-main{
  width:100%;
  height: 100%;
  overflow-y: auto;
  background: #fff;
  box-sizing: border-box;
}
.notification-item{
  border-bottom: 1px solid #e9f0f5;
  padding: 16px 0;
  width:100%;
  height: auto;
  box-sizing: border-box;
}
.notification-title{
  display: flex;
  align-items: center;
  padding:0 12px;
  img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    margin-right:8px;
  }
  p{
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium, sans-serif;
    font-weight: 500;
    color: rgba(0,0,0,0.85);
  }
}
.notification-characters{
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular, sans-serif;
  font-weight: 400;
  color: rgba(0,0,0,0.85);
  line-height: 22px;
  padding:12px;
}
.notification-img{
  display: flex;
  padding:0 9px 0 12px;
  align-items: center;
  flex-wrap: wrap;
  img{
    width:115px;
    height:115px;
    border-radius: 4px;
    margin:0 3px 10px 0;
  }
}
</style>
